<template>
  <a-scrollbar>
    <a-form
      v-model="formConfig"
      size="mini"
      label-align="right"
      layout="horizontal"
    >
      <a-form-item
        field="size"
        tooltip=""
        label="控件尺寸"
      >
        <a-radio-group v-model="formConfig.size" type="button">
          <a-radio value="mini">迷你</a-radio>
          <a-radio value="small">小</a-radio>
          <a-radio value="medium">中</a-radio>
          <a-radio value="large">大</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="layout"
        tooltip=""
        label="表单布局"
      >
        <a-radio-group v-model="formConfig.layout" type="button">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <a-radio value="inline">行内排列</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="labelAlign"
        tooltip=""
        label="标签方向"
      >
        <a-radio-group v-model="formConfig.labelAlign" type="button">
          <a-radio value="left">左</a-radio>
          <a-radio value="right">右</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="标签宽度"
      >
        <a-input-number
          v-model="formConfig.labelColProps.span"
          mode="button"
          :max="24"
          min="0"
        />
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="标签位移"
      >
        <a-input-number
          v-model="formConfig.labelColProps.offset"
          mode="button"
          :max="24"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="控件宽带"
      >
        <a-input-number
          v-model="formConfig.wrapperColProps.span"
          mode="button"
          :max="24"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="控件位移"
      >
        <a-input-number
          v-model="formConfig.wrapperColProps.offset"
          mode="button"
          :max="24"
          min="0"
        />
      </a-form-item>
      <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
        事件设置
      </a-divider>
      <br />
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="onCreated"
        :label-col-props="labelColProps"
        :wrapper-col-props="wrapperColProps"
      >
        <a-button type="primary" shape="round" @click="editOnCreated">
          <template #icon>
            <icon-edit />
          </template>
          编辑事件
        </a-button>
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="onMounted"
        :label-col-props="labelColProps"
        :wrapper-col-props="wrapperColProps"
      >
        <a-button type="primary" shape="round">
          <template #icon>
            <icon-edit />
          </template>
          编辑事件
        </a-button>
      </a-form-item>
      <a-form-item
        field="labelColProps"
        tooltip=""
        label="onChange"
        :label-col-props="labelColProps"
        :wrapper-col-props="wrapperColProps"
      >
        <a-button type="primary" shape="round">
          <template #icon>
            <icon-edit />
          </template>
          编辑事件
        </a-button>
      </a-form-item>
    </a-form>

    <code-editor ref="codeEditorRef" />
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import CodeEditor from '@/components/code-editor/index.vue';
import { labelColProps, wrapperColProps } from './config';

const formConfig = defineModel('formConfig', { type: Object, default: {} });

const codeEditorRef = ref();

const editOnCreated = () => {
  codeEditorRef.value.open();
};

</script>

<script lang="ts">
export default {
  name: 'FormSetting'
};
</script>

<style scoped>

</style>